<template>
  <div>
      <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约管理</el-breadcrumb-item>
            <el-breadcrumb-item>团体预约</el-breadcrumb-item>
            <el-divider></el-divider>
        </el-breadcrumb>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="ruleForm.mobile"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
                    <el-cascader
                      v-model="ruleForm.region"
                      :options="options"
                      :props="cateProps"
                      clearable>
                    </el-cascader>
          </el-form-item>

            <!-- 多人预约统计 -->
          <el-form-item class="groups" label="成员登记" prop="group">
                <el-input-number @change="handleChange" v-model="num" :min="1" :max="100" label="描述文字">

                </el-input-number>
                <el-button type="primary" @click="submitHU">确定人数</el-button>
          </el-form-item>

           <el-form-item label="预约邀请">
             <h3>湖州市平安实训基地暨吴兴平安实训学院:   </h3>
             <p>兹有</p>
             <el-input placeholder="请输入单位名称" class="inputIntroduce" v-model="introduce"></el-input>
             <p>带领部分同志前往贵学院参观学习，目的是为了加强公共安全意识及提高实际公共安全应变处置操作能力，请贵学院予以接洽。</p>
           </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>

        <div class="cyuan" v-if="stringResuls">{{stringResul}}</div>

        <el-dialog
        title="成员登记表"
        :visible.sync="dialogVisible"
        width="90%"
        :before-close="handleClose">
        <!-- form表单登记信息 -->
        <el-form class="formgroup">
            <el-steps :space="470" :active="6" finish-status="success">
                <el-step title="姓名"></el-step>
                <el-step title="性别"></el-step>
                <el-step title="手机号"></el-step>
                <el-step title="工作单位"></el-step>
                <el-step title="职务"></el-step>
            </el-steps>
            <el-form-item :label="index + 1 + ''" v-for="(item, index) in num" :key="index">
                <el-col :span="4">
                    <el-input v-model="form[index].username"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="form[index].sex"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="form[index].mobile"></el-input>
                </el-col>
                <el-col :span="7">
                    <el-input v-model="form[index].Company"></el-input>
                </el-col>
                <el-col :span="7" v-if="false">
                    <el-input v-model="form[index].number"></el-input>
                </el-col>
                <el-col :span="7" v-if="false">
                    <el-input v-model="form[index].fraction"></el-input>
                </el-col>
                <el-col :span="7" v-if="false">
                    <el-input v-model="form[index].curriculum"></el-input>
                </el-col>
                <el-col :span="4">
                    <el-input v-model="form[index].post"></el-input>
                </el-col>
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="determineGroup">确 定</el-button>
        </span>
        </el-dialog>

  </div>
</template>

<script>
export default {
  data () {
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
      if (regMobile.test(value)) {
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      stringResuls: false,
      dialogVisible: false,
      introduce: '',
      // 预约人数选择
      num: 1,
      activeIndex: '1',
      ruleForm: {
        name: '',
        region: [],
        mobile: '',
        // 名单
        group: [],
        // 介绍信
        introduce: ''
      },
      form: [
        {
          username: '',
          sex: '',
          mobile: '',
          //   单位
          Company: '',
          number: 0,
          fraction: 0,
          curriculum: [],
          type: 2,
          // 职务
          post: ''
        }
      ],
      stringResul: '',
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择预约项目', trigger: 'change' }
        ],
        mobile: [
          { required: true, message: '请输入手机', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },

      cateProps: { multiple: true, emitPath: false },
      options: [{
        value: 'bmcs',
        label: '便民超市'
      },
      {
        value: 'bmyd',
        label: '便民药店'
      },
      {
        value: 'cydcf',
        label: '餐饮店厨房'
      },
      {
        value: 'czw',
        label: '出租屋'
      },
      {
        value: 'dxylss',
        label: '大型游乐设施'
      },
      {
        value: 'dg',
        label: '电工'
      },
      {
        value: 'fzp',
        label: '防诈骗'
      },
      {
        value: 'ga',
        label: '国安'
      },
      {
        value: 'hdzl',
        label: '河道治理'
      },
      {
        value: 'hxsys',
        label: '化学实验室'
      },
      {
        value: 'jzsgaq',
        label: '建筑施工安全'
      },
      {
        value: 'jxl',
        label: '教学楼'
      },
      {
        value: 'kycaq',
        label: '客运车安全'
      },
      {
        value: 'lsqs',
        label: '绿水青山'
      },
      {
        value: 'rq',
        label: '燃气'
      },
      {
        value: 'sccj',
        label: '生产车间'
      },
      {
        value: 'spjgxzf',
        label: '食品加工小作坊'
      },
      {
        value: 'sg',
        label: '事故'
      },
      {
        value: 'sd',
        label: '书店'
      },
      {
        value: 'tzc',
        label: '童装厂'
      },
      {
        value: 'wb',
        label: '网吧'
      },
      {
        value: 'wc',
        label: '五车'
      },
      {
        value: 'xc',
        label: '校车'
      },
      {
        value: 'xyfl',
        label: '校园法律'
      },
      {
        value: 'xyjws',
        label: '校园警务室'
      },
      {
        value: 'xj',
        label: '邪教'
      },
      {
        value: 'xsss',
        label: '学生宿舍'
      },
      {
        value: 'yjjy',
        label: '应急救援'
      },
      {
        value: 'yz',
        label: '邮政'
      }]
    }
  },
  created () {
  },
  methods: {
    async handleChange (value) {
      await this.form.push({
        username: '',
        sex: '',
        mobile: '',
        //   单位
        Company: '',
        number: 0,
        fraction: 0,
        curriculum: [],
        type: 2,
        // 职务
        post: ''
      })
    },
    async submitForm (formName) {
      this.ruleForm.introduce = `湖州市平安实训基地暨吴兴平安实训学院:兹有${this.introduce}带领部分同志前往贵学院参观学习，目的是为了加强公共安全意识及提高实际公共安全应变处置操作能力，请贵学院予以接洽。`

      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })

      const data = await this.$http.post('group/establish', this.ruleForm)

      var pers = ''
      for (const key in data.data) {
        const personnel = data.data[key]
        for (const keys in personnel) {
          console.log(personnel[keys])
          pers += `姓名：${keys}, 预约号：${personnel[keys]}`
        }
      }
      console.log(pers)
      this.stringResul = pers
      this.stringResuls = true
      setTimeout(() => {
        this.stringResuls = false
      }, 10000)
      const numbers = this.ruleForm.mobile
      setTimeout(async () => {
        const {
          data: res
        } = await this.$http.post('sendmYYH', {
          numbers: numbers,
          number: this.stringResul
        })
        console.log(res)
        if (res) {
          this.$message.success('注册成功预约号已发送手机')
        }
      }, 100)
    },
    // 重置
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.num = 1
      this.introduce = ''
    },
    // 确定人数按钮
    submitHU () {
      this.dialogVisible = true
    },

    // 登记表单关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 确定人数提交按钮
    determineGroup () {
      this.dialogVisible = false
      this.ruleForm.group = this.form
    }
  }
}
</script>

<style lang="less" scoped>
  .el-form{
    width: 50%;
    margin-left: 13%;
    margin-top: 3%;
    padding: 5%;
    background-color: #fff;
  }
  .el-input-number{
      margin-right: 4%;
  }
  .el-steps{
      margin-left: 4%;
  }
  .formgroup{
      margin-top: -5%;
      margin-left: 0;
  }
  /deep/.inputIntroduce input{
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  /deep/.el-step__head{
    display: none;
  }
  /deep/.el-step__title.is-success {
    color: #333;
}
/deep/.el-dialog__header {
    text-align: center;
}
.cyuan {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #999;
    font-size: 30px;
    width: 50%;
    text-align: center;
    height: 20%;
    z-index: 999;
    padding: 30px;
    padding-top: 40px;
    color: #fff;
    border-radius: 10px;
}
</style>
